<template>
  <div style="background-color: #ffffff;">
    <HeadNav :title="'2025.01.25入库统计'"></HeadNav>
    <div class="content">
      <div class="pageTop">
        <div class="pageTop-left">
          <img
            src="../../assets/images/library_left.png"
            alt="">
          <div class="middle_text left_text_position">
            <div class="middle_text_num">30</div>
            <div class="middle_text_name">已填报</div>
          </div>
        </div>
        <div class="pageTop-right">
          <img
            src="../../assets/images/library_right.png"
            alt="">
          <div class="middle_right_text">
            <div class="middle_text_num">16</div>
            <div class="middle_text_name">未填报</div>
          </div>
        </div>
      </div>
      <div class="content_Title">
        <div class="content_Title_text">{{ detailsBox.name }}档口（{{ detailsBox.sumNum }}）</div>
        <div class="endTime">截止{{ detailsBox.endTime }}</div>
      </div>
      <div class="content_Item_List">
        <div
          class="content_Item"
          v-for="(item,index) in detailsBox.detaList"
          :key="index">
          <div class="content_Item_left">
            <div class="item_img"><img
              src="../../assets/images/recordIcon.png"
              alt=""> </div>
            <div class="content_Item_name">{{ item.name }}</div>
          </div>
          <div class="content_Item_right">{{ item.status }}</div>
        </div>
      </div>
    </div>
    <foot></foot>
  </div>
</template>

<script>
/* eslint-disable */
// import { getApplyCertificationPagePho, getVerifyTypeList } from '@/api/api'
import { getParams } from '@/common/public'
import HeadNav from '@/components/HeadNav'
import foot from '../foot/foot.vue'
// import moment from 'moment'
// import { mapState } from 'vuex'
export default {
  name: 'SIndex',
  components: {
    HeadNav,
    foot
  },
  computed: {
    // ...mapState({
    //   token: (state) => state.applyrecords.token
    // })
  },
  watch: {
    active(newVal) {
      console.log('newVal', newVal)
      if (newVal === 0) {
        this.params.applyType = null
        this.loading = true
        this.contentData = []
        this.finished = false
        if (!this.finished) {
          this.onLoad(1)
        }
      } else {
        this.params.applyType = newVal
        this.loading = true
        this.contentData = []
        this.finished = false
        if (!this.finished) {
          this.onLoad(1)
        }
      }
    }
  },
  data() {
    return {
      active: 0,

      detailsBox: {
        name:'未填报',
        sumNum:'20',
        endTime:'01.26 12:59:59',
        detaList: [
          {
            id: 1,
            name: '精品套餐',
            status:'未填报'
          },
          {
            id: 2,
            name: '乐山钵钵鸡',
            status:'未填报'
          },
          {
            id: 3,
            name: '骨汤香辣面',
            status:'未填报'
          },
          {
            id: 4,
            name: '烤肉自选套餐',
            status:'未填报'
          },
          {
            id: 5,
            name: '石锅菜',
            status:'未填报'
          }
        ],
        sumPrice: '795',
        sumNum: '5'
      },
      isSubmit: false,
      params: {

      }
    }
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if(to.query.item!==undefined){
        vm.localData = JSON.parse(to.query.item)
        console.log(vm.isSubmit, 'ppppppppppuiuuuuu')
        vm.isSubmit = vm.localData.isSubmit
        console.log(vm.isSubmit)
        //   this.navBarTitle= vm.params.date + '申报明细'
      }else{
        vm.isSubmit=false
      }
    
    })
  },
  mounted() {
    // window.onPageFinished = this.onPageFinished
    // this.$bridge.registerhandler('onPageFinished')
    // Android端
    // window.android.showToast('展示内容提示')
    // window['onPageFinished'] = (data) => {

    // const u = navigator.userAgent
    // const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1 // g
    // const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端
    // if (isAndroid) {
    //   window.android.hideToolbar()
    //   window.android.setEnableSwipeBack(true)
    // }
    // if (isIOS) {
    //   var s = {}
    //   this.$bridge.callhandler('hideToolbar', s, (data) => { })
    // }
    // // }
  },
  created() {
    // // 保存token
    // // localStorage.setItem('Authorization', '')
    // const Authorization = getParams('access_token')
    // this.$store.commit('applyrecords/setToken', Authorization)
    // // this.$store.state.area.areaSelect
    // console.log(
    //   'this.$store.state.applyrecords.token',
    //   this.$store.state.applyrecords.token
    // )
    // console.log(Authorization)
    // console.log(location.href)
    // localStorage.setItem('Authorization', Authorization)
    // if (!sessionStorage.getItem('Authorization')) {
    //   sessionStorage.setItem('Authorization', Authorization)
    // }

    // console.log(sessionStorage.getItem('Authorization'))
    // // 认证任务
    // // this.getApplyRecordPho()
    // // 获取认证类型
    // this.paramsStatus.access_token = sessionStorage.getItem('Authorization')
    // getVerifyTypeList(this.paramsStatus).then((res) => {
    //   if (res.statusCode === 0) {
    //     console.log('获取认证类型', res)
    //     const list = res.content.map((item, index) => {
    //       return {
    //         typeId: item.typeId,
    //         typeName: item.typeName
    //       }
    //     })
    //     console.log('list', list)
    //     if (list.length > 0) {
    //       this.tabDatasss = this.tabDatasss.concat(list)
    //       this.tabData = this.tabDatasss
    //       console.log('tabData1', this.tabData)
    //     }
    //     // this.tabData = this.tabData.concat(list)
    //     console.log('tabData2', this.tabData)
    //   } else {
    //     // this.$message.error(res.errorMessage)
    //   }
    // })
  },
  methods: {
    // beforeChange(index) {
    //   console.log('index', index)
    //   if (index === 0) {
    //     this.params.applyType = null
    //     this.loading = true
    //     this.contentData = []
    //     this.finished = false
    //     if (!this.finished) {
    //       this.onLoad(1)
    //     }
    //   } else {
    //     this.params.applyType = index
    //     this.loading = true
    //     this.contentData = []
    //     this.finished = false
    //     if (!this.finished) {
    //       this.onLoad(1)
    //     }
    //   }
    //   return true
    // },

    // handleDetails(item) {
    //   this.$router.push({
    //     path: '/authenticateDetails',
    //     query: { item: JSON.stringify(item) }
    //   })
    // },
    // getApplyRecordPho() {
    //   this.params.access_token = sessionStorage.getItem('Authorization')
    //   getApplyCertificationPagePho(this.params).then((res) => {
    //     if (res.statusCode === 0) {
    //       res.content.records.forEach((item) => {
    //         item.applyTime = moment(item.applyTime).utc().format('YYYY-MM-DD')
    //         if (item.verifyTime !== '' && item.verifyTime !== null) {
    //           item.verifyTime = moment(item.verifyTime)
    //             .utc()
    //             .format('YYYY-MM-DD')
    //         }
    //       })
    //       if (res.content.records === 0) {
    //         // debugger
    //         // 判断获取数据条数若等于0
    //         this.contentData = [] // 清空数组
    //         this.finished = true // 停止加载
    //         this.finishedText = '暂无数据'
    //       }
    //       // 若数据条数不等于0
    //       this.total = res.content.total // 给数据条数赋值
    //       this.contentData.push(...res.content.records) // 将数据放入list中
    //       this.loading = false // 加载状态结束
    //       // 如果list长度大于等于总数据条数,数据全部加载完成
    //       console.log(this.contentData)
    //       if (this.contentData.length >= res.content.total) {
    //         // this.finished = true // 结束加载状态
    //         if (this.contentData.length > 0) {
    //           this.finished = true // 结束加载状态
    //           this.finishedText = '没有更多了'
    //         } else {
    //           this.finished = true // 结束加载状态
    //           this.finishedText = '暂无数据'
    //         }
    //       }
    //     } else {
    //       this.finishedText = '加载失败，请刷新后重试'
    //     }
    //   })
    // },
    // onLoad(val) {
    //   this.loading = true
    //   const timer = setTimeout(() => {
    //     // 定时器仅针对本地数据渲染动画效果,项目中axios请求不需要定时器
    //     this.getApplyRecordPho() // 调用上面方法,请求数据
    //     this.params.pageNo++ // 分页数加一
    //     if (val === 1) {
    //       // 每次搜索、或者初始化
    //       this.params.pageNo = 0
    //     }
    //     this.finished && clearTimeout(timer) // 清除计时器
    //   }, 100)
    // },
    toCheck() {
      this.$router.push({ path: '/selectFillIn' })
    }
  },
  beforeDestroy() {
    console.log('index')
    window.removeEventListener('scroll', this.onLoad, true)
  }
}
</script>

<style lang="less" scoped>
span,
p {
  padding: 0;
  margin: 0;
}


.content {
  overflow: hidden;
  margin-bottom: 10px;
}

.pageTop {
  display: flex;
  align-items: center;
  margin-top: 60px;
  justify-content: space-between;
  margin-left: 24px;
  margin-right: 24px;

  .pageTop-left {
    width:calc((100% - 12px)/2);
    height: 115px;
    border-radius: 20px;
    background: #e9f2f7;
    // position: relative;
    display: flex;
    align-items: center;
    padding-left: 16px;
    padding-right: 16px;

    img {
      width: 55px;
      height: 55px;
      // position: absolute;
      // top: 25%;
      // left: 10%;
    }
  }
  .pageTop-right{
    height: 115px;
    border-radius: 20px;
    background: #e9f0fd;
    width:calc((100% - 12px)/2);
    margin-left: 12px;
    display: flex;
    align-items: center;
    padding-left: 16px;
    padding-right: 16px;

    img {
      width: 55px;
      height: 55px;
    }
  }

  .middle_text {
    // position: absolute;
    text-align: left;
    margin-left: 12px;
  }

  .middle_text_num {
    font-size: 25px;
    color: #000000;
  }

  .middle_text_name {
    font-size: 15px;
    color: #000000;
  }

  // .left_text_position {
  //   top: 25%;
  //   right: 10%;
  // }
    .middle_right_text {
      margin-left: 12px;
  
      .middle_text_num {
        font-size: 25px;
        color: #000000;
      }
  
      .middle_text_name {
        font-size: 15px;
        color: #000000;
      }
    }
}
.content_Title{
  display: flex;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #e5e5e5;
  .content_Title_text{
    color: #000000;
    font-size: 15px;
    text-align: left;
  }
  .endTime{
    color: #999999;
    font-size: 10px;
  }
}
.content_Item_List{
  background-color: #f9f9f9;

  .content_Item{
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    margin-bottom: 5px;

    .content_Item_left{
      display: flex;
      align-items: center;

      .item_img{
        img{
          width: 22px;
          height: 22px;
        }
      }
      .content_Item_name{
        font-size: 14px;
        text-align: left;
        color: #000000;
        margin-left: 14px;
        line-height: 14px;
      }
    }
    .content_Item_right{
      font-size:12px;
      line-height: 12px;
      text-align: left;
      color: #999999; 
    }
  }
}
</style>
